<html >
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <!-- <script src="jquery-1.8.3.js"> -->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </script>
   
</head>
   
   <body>
      <div  style="margin-left:30%;margin-top:10%;width:400;height:400px;border:solid">
      <table >
         <tr>
            <td>
            <div id="leavediv" style="border:solid;width:150;height:340px">
                <input type="checkbox" autocomplete="off" value="10006" name="leaved"/><span>电视机</span><br/>
                <input type="checkbox" autocomplete="off" value="10007" name="leaved"/><span>洗衣机</span><br/>
                <input type="checkbox" autocomplete="off" value="10008" name="leaved"/><span>冰箱</span><br/>
                <input type="checkbox" autocomplete="off" value="10009" name="leaved"/><span>手表</span><br/>
                 <input type="checkbox" autocomplete="off" value="10010" name="leaved"/><span>奶粉</span><br/>
                <input type="checkbox" autocomplete="off" value="10011" name="leaved"/><span>空调</span><br/>
                <input type="checkbox" autocomplete="off" value="10012" name="leaved"/><span>音像</span><br/>
                
                
            </div>
            </td>
            <td>
            <input id="addstr" type="button" value="授权>"><br/>
            <input id="delstr" type="button" value="<删除">
            </td>
            <td>
            <div id="gaineddiv" style="border:solid;width:150;height:340px">
                 <input type="checkbox" autocomplete="off" value="10001" name="gained"/><span>箱包</span><br/>
                <input type="checkbox" autocomplete="off" value="10002" name="gained"/><span>3C数码</span><br/>
                <input type="checkbox" autocomplete="off" value="10003" name="gained"/><span>美妆</span><br/>
                <input type="checkbox" autocomplete="off" value="1004" name="gained"/><span>彩票</span><br/>
                  <input type="checkbox" autocomplete="off" value="10005" name="gained"/><span>百货</span><br/>
            </div>
            </td>
         </tr>
      </table>
      <div align="center">
      <input align="center" type="button" value="关闭" /><input id="confirm" type="button" value="确定"/>
      </div>
      <div>
      <form id="changedstr" action="cataca.action">
      <input id="ch" type="hidden" value="" /><br/>
      
      </form>
   </body>
<script>
   $(document).ready(function(){
     var addstr="";
     var delstr="";
     $("#addstr").click(function(){
     
          var obj=$("input[type=checkbox][name=leaved]:checked");
          var count=obj.length;
          
          for(var i=0;i<count;i++){
            
              $("#gaineddiv").append("<input type='checkbox' value='"+obj[i].value+"' name='gained'/><span>"+$(obj[i]).next().html()+"</span><br/>");
              var objvalue=obj[i].value;
              $(obj[i]).next().next().remove();
              $(obj[i]).next().remove();
              $(obj[i]).remove();
              if(delstr.indexOf(objvalue)>-1){
                            delstr=delstr.replace(objvalue+"~","");
                            }else{
                               addstr=addstr+objvalue+"~";
                            }
             
             
          }
    
     })
     $("#delstr").click(function(){
          var obj=$("input[type=checkbox][name=gained]:checked");
          var count=obj.length;
          
          for(var i=0;i<count;i++){
            
              $("#leavediv").append("<input type='checkbox' value='"+obj[i].value+"' name='leaved'/><span>"+$(obj[i]).next().html()+"</span><br/>");
              var objvalue=obj[i].value;
              $(obj[i]).next().next().remove();
              $(obj[i]).next().remove();
              $(obj[i]).remove();
              if(addstr.indexOf(objvalue)>-1){
                                addstr=addstr.replace(objvalue+"~","");
                                           }else{
                                                delstr=delstr+objvalue+"~";
                                               }
            
     }
    })
    
    
          $("#confirm").click(function(){
               alert("授权的商品组:"+addstr);
               alert("删除的商品组:"+delstr);
          })
     })
</script>
</html>